import { useNavigate } from 'react-router-dom'
import NavTop from '../components/navtop'
import '../assets/css/login.css'
import '../assets/css/register.css'
import logo from '../assets/images/logo1.png'
import { Register } from '../request/app.js'
import { useState } from 'react'
function Home() {
    const [user, setUser] = useState({
        phone: "",
        password: "",
        nickname: ""
    })
    const navigate = useNavigate()
    //封装一个注册事件
    function register() {
        if (!user.phone || !user.password || !user.nickname) {
            alert('请输入必要的参数')
            return
        } else {
            Register(user)
                .then(res => {
                    if (res.code == 200) {
                        alert(res.msg)
                        navigate('/login')
                    } else {
                        alert(res.msg)
                        window.location.reload()
                        console.log(user);
                        return
                    }
                })
        }

    }
    function changeinfo(type, e) {
        setUser({
            ...user,
            [type]: e.target.value
        })
    }
    return (<div>
        <div id="page">
            <NavTop />
            <div className="body">
                <div className="body_center">
                    <img src={logo} alt="" />
                    <div>
                        <input type="text" placeholder='手机号' onChange={changeinfo.bind(this, 'phone')}
                        />
                    </div>
                    <div className='testCode'>
                        <input type="text" placeholder='昵称' onChange={changeinfo.bind(this, 'nickname')}
                        />
                    </div>
                    <div>
                        <input type="password" placeholder='密码' onChange={changeinfo.bind(this, 'password')}
                        />
                    </div>
                    <button className='register' onClick={() => register()}>注册</button>
                </div>
            </div>
        </div>
    </div>)
}

export default Home